/*
 * @Description: 借阅规则面板
 * @Author: Rfan
 * @Date: 2022-03-24 10:32:07
 * @LastEditTime: 2022-05-25 08:54:55
 */

import type { FC } from 'react';
import classNames from 'classnames/bind';
import { Card, Checkbox, Form, Input, Radio, Space, Switch } from 'antd';

import styles from '../../styles/list.module.scss';

const cx = classNames.bind(styles);

export type RuleListProps = {
  title?: string;
  data?: any;
};

const RuleList: FC<RuleListProps> = ({ title, data }) => {
  console.log('rule pane:', data);
  // 到期提醒表单关联
  const [periodForm] = Form.useForm();
  // 借阅配置表单关联
  const [settingForm] = Form.useForm();

  /**
   * @description: 到期提醒开关
   * @param {boolean} checked
   */
  const onSwitchChange = (checked: boolean) => {
    console.log(`switch to ${checked}`);
  };

  /**
   * @description: 借阅配置开关
   * @param {boolean} checked
   */
  const onSettingSwitchChange = (checked: boolean) => {
    console.log(`switch to ${checked}`);
  };
  return (
    <div className={cx('approve-list')}>
      <Card size="small" title="到期提醒">
        <Form form={periodForm}>
          <Form.Item name="note" label="Note">
            <Switch checkedChildren="开启" unCheckedChildren="关闭" onChange={onSwitchChange} />
          </Form.Item>
          <Form.Item label="到期提醒设置">
            <Form.Item noStyle name="note">
              <div>
                <Space>
                  {' '}
                  档案借阅到期前
                  <Input /> 天,在“【我的借阅】中提示
                </Space>
              </div>
            </Form.Item>
            <Form.Item noStyle name="note">
              <div>
                <Space>
                  档案借阅到期前
                  <Input /> 天,在“【借阅管理】中提示
                </Space>
              </div>
            </Form.Item>
          </Form.Item>
        </Form>
      </Card>
      <Card size="small" title="借阅配置">
        <Form form={settingForm}>
          <Form.Item name="note" label="是否开启">
            <Switch
              checkedChildren="开启"
              unCheckedChildren="关闭"
              onChange={onSettingSwitchChange}
            />
          </Form.Item>
          <Form.Item label="借阅配置">
            <Form.Item noStyle name="note">
              <Radio.Group>
                <Radio value={1}>统一配置</Radio>
                <Radio value={2}>按档案库配置</Radio>
              </Radio.Group>
            </Form.Item>
            <Form.Item noStyle name="note">
              <div>
                <Space>
                  所有档案
                  <Checkbox>过期未归还者禁止借阅</Checkbox>
                  <span>
                    <Space>
                      借阅期限默认
                      <Input /> 天
                    </Space>
                  </span>
                </Space>
              </div>
            </Form.Item>
            <Form.Item noStyle name="note">
              <div>
                <Space>
                  文书档案
                  <Checkbox>过期未归还者禁止借阅</Checkbox>
                  <span>
                    <Space>
                      借阅期限默认
                      <Input /> 天
                    </Space>
                  </span>
                </Space>
              </div>
            </Form.Item>
          </Form.Item>
        </Form>
      </Card>
    </div>
  );
};

export default RuleList;
